<template>
  <div class="p32">
    <Breadcrumb>
      <BreadcrumbItem to="/socialsecurity/insurance">返回</BreadcrumbItem>
      <BreadcrumbItem>增减员计划</BreadcrumbItem>
    </Breadcrumb>
    <div class="teble-header-btns flex">
      <span></span>
      <div class="right">
        <Button class="save-btn-green mr12" @click="add">添加增员计划</Button>
      </div>
    </div>
    <div class="table-wrap">
      <Table width="100%" :columns="columns" :data="data4" class></Table>
    </div>

    <!-- next modal -->
    <Modal v-model="modal2" style="width:360px;">
      <p slot="header" style="font-weight:bold;">创建参保方案</p>
      <div class="m-c-content">
        <p class="center title">您还没创建任何参保方案</p>
        <div class="f-table-wrap">
          <div class="c-t c-t-list">
            <div class="item-list">
              <img
                src=""
                class="img-icon"
              />
              <div class="title-list">1.创建自主参保方案</div>
            </div>
            <div class="item-list">
              <img
                src=""
                class="img-icon"
              />
              <div class="title-list">2.返回本月添加参保人</div>
            </div>
            <div class="item-list">
              <img
                src=""
                class="img-icon"
              />
              <div class="title-list">3.添加参保成功</div>
            </div>
          </div>
        </div>
      </div>
      
      <div slot="footer">
        <div class="m-c-footer flex-center">
          <div class="m-c-right">
            <Button class="save-btn-green large" @click="addScheme">去创建参保方案</Button>
          </div>
        </div>
      </div>
    </Modal>
    <!-- next modal end -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      modal2: false,
      columns: [
        // {
        //   title: " ",
        //   key: "avatar",
        //   width: "60",
        //   render: (h, params) => {
        //     return h("div", [
        //       h("img", {

        //         class: "avatar-table",
        //         attrs: {
        //           src:
        //             ""
        //         }
        //       })
        //     ]);
        //   }
        // },
        {
          title: "类型",
          key: "name"
        },
        {
          title: "月份",
          key: "age"
        },
        {
          title: "姓名",
          key: "province"
        },
        {
          title: "参保城市",
          key: "city"
        },
        {
          title: "参保方案",
          key: "city"
        },
        {
          title: "个人缴费",
          key: "city"
        },
        {
          title: "公司缴费",
          key: "city"
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",

                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ],
      data4: [
        {
          name: "--",
          age: "--",
          address: "--",
          province: "--",
          selection: "--",
          avatar: "--",
          city: "--",
          zip: 100000
        }
      ]
    };
  },
  methods: {
    cancel() {
      this.modal2 = false;
    },
    addScheme() {
      this.modal2 = false;
      this.$router.push("/socialsecurity/scheme/add");
    },
    add() {
      this.modal2 = true;
    }
  }
};
</script>
<style lang="scss" scoped src="../index.scss">
</style>